<template>
    <div>
        <el-container>
            <el-aside width="200px" style="background-color:#545c64">
                <TheAside></TheAside>
            </el-aside>
            <el-container>
                <el-header>
                    <TheHeader></TheHeader>
                </el-header>
                <el-divider></el-divider>
              <div class="breadcrumb">
                <TheBreadCrumb></TheBreadCrumb>
              </div>
                <el-main>
                    <div>
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>

      <el-dialog title="修改密码"
                 :visible.sync="dialogVisible"
                 modal="false"
                 class="dialogs"
                 center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="50px">
          <el-form-item label="旧密码" prop="lastpass" class="item">
            <el-input v-model="ruleForm.lastpass" clearable autocomplete="off">
              <i style="color:#0bdf6b;line-height: 50px" slot="prefix" class="el-icon-s-custom"></i>
            </el-input>
          </el-form-item>

          <el-form-item label="新密码" prop="pass">
            <el-input v-model="ruleForm.pass" show-password clearable autocomplete="off">
              <i style="color:#0bdf6b;line-height: 50px" slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" show-password clearable
                      autocomplete="off">
              <i style="color:#0bdf6b;line-height: 50px" slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
           <div class="bottom">
             <el-button type="primary" @click="Cancel" round>取消操作</el-button>
             <el-button type="primary" @click="submitForm('ruleForm')" round>进行修改</el-button>
           </div>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>

<script>
    import TheHeader from "./TheHeader";
    import TheAside from "./TheAside";
    import TheBreadCrumb from "./TheBreadCrumb";
    import {UpdatePass} from "../api";

    export default {
        name: "Home",
        components: {TheHeader, TheAside, TheBreadCrumb},
        data(){
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return{
            dialogVisible: false,
            ruleForm: {
              lastpass: '',
              pass: '',
              checkPass: '',
            },
            form:{
              id:'',
              lastpass: '',
              pass: '',
            },
            rules: {
              lastpass: [
                {required: true, message: '请输入旧密码', trigger: 'blur'},
                {min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur'}
              ],
              pass: [
                {required: true, message: '请输入新密码', trigger: 'blur'},
                {min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur'},
                {validator: validatePass, trigger: 'blur'}
              ],
              checkPass: [
                {required: true, message: '请输入新密码', trigger: 'blur'},
                {min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur'},
                {validator: validatePass2, trigger: 'blur'}
              ],
            },
            formLabelWidth: '120px'
          }
        },
        created() {
           this.dialogVisible =  this.$store.getters.getvisiable
         },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.form.id = this.$store.getters.getUser.id;
              this.form.lastpass = this.ruleForm.lastpass;
              this.form.pass = this.ruleForm.pass;
              UpdatePass(this.form).then((res) =>{
                this.$router.push("/");
              })
              this.dialogVisible = false
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        Cancel(){
          this.dialogVisible = false
          this.$message.success("取消成功")
        },
      }
    }
</script>

<style scoped>
    .el-header {
        position: fixed;
        top: 0;
        background-color: #B3C0D1;
        color: #333;
        height: 50px;
        line-height: 50px;
        width: 100%;
    }

    .el-aside {
        position: fixed;
        left: 0;
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        height: 100%;
        z-index: 111;
    }

    .el-main {
        position: fixed;
        background-color: #E9EEF3;
        color: #333;
        margin-top: 110px;
        padding-top: 0;
        margin-left: 180px;
        width: 100%;
        height: 100%;

    }

    .el-divider--horizontal {
        margin: 0;
    }
    .breadcrumb{
      position: fixed;
      top: 60px;
      height: 50px;
      line-height: 50px;
      width: 100%;
      background-color: #cdc1c1;

    }
    .dialogs{
      position: fixed;
      z-index: 9999;
      background-color: #464240;
      /*opacity: 0.7;*/
    }

    >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
      content: ' ';
    }
    >>> .el-form-item__label {
      line-height: 20px;
      font-size: 15px;
      text-align: center;
      padding: 5px 2px;

    }
.el-button{
  margin-right: 20px;
}
.bottom{
  margin-left: 200px;
}
</style>
